<%--
  Created by IntelliJ IDEA.
  User: 刘洋
  Date: 2019/11/12
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加题目</title>
    <jsp:include page="/layout/_imports.jsp"></jsp:include>
</head>
<body>
<script>
    var j = 1;

    function addtr() {
        var symbol = String.fromCharCode(65 + j++);
        var inputField = $('<input/>').attr("name", "contents").attr("class", "form-control col-sm-11").attr("type", "text");
        var spanField = $("<div/>").attr("class","col-sm-1").append(symbol + "：");
        $("#contentsTable").append($("<div/>").append(spanField).append(inputField).attr("class","row"));
    }

    function detetr() {
        if ($("#contentsTable .row").length == 1) return;
        j--;
        $("#contentsTable .row:last").remove();
    }
</script>
<style>
    #contentsTable input{
        margin-bottom: 10px;
    }


    #contentsTable input:last-child {
        margin-bottom: 0;
    }


    #contentsTable .col-sm-1 {
        display: flex;
        align-items: center;
    }
    #contentsTable .row {
        margin-bottom: 10px;
    }
    #contentsTable .row:last-child{
        margin-bottom: 0;
    }
</style>
<jsp:include page="/layout/_nav.jsp"></jsp:include>
<div class="container">
    <h2>添加题目</h2>
    <form action="${pageContext.request.contextPath}/item" method="post">
        <input type="hidden" name="state" value="add">

        <div class="form-group row">
            <label class="col-sm-2" for="title">标题</label>
            <div class="col-sm-10">
                <input class="form-control" id="title" type="text" name="title">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-2" for="contents">内容</label>
            <div class="col-sm-8" id="contentsTable">
                <div class="row">
                    <div class="col-sm-1">
                        <span>A:</span>
                    </div>
                    <input class="col-sm-11 form-control " id="contents" type="text" name="contents">
                </div>
            </div>
            <div class="col-sm-2">
                <input type="button" value="添加行" class="btn btn-primary" onclick="addtr()">
                <input type="button" value="删除行" class="btn btn-danger" onclick="detetr()">
            </div>
        </div>

        <div class="form-group row">
            <label for="score" class="col-sm-2">分数</label>
            <div class="col-sm-10">
                <input class="form-control" id="score" type="text" name="score">
            </div>
        </div>

        <div class="form-group row">
            <label for="answerId" class="col-sm-2">答案</label>
            <div class="col-sm-10">
                <input class="form-control" id="answerId" type="text" name="answer">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-2">多选题</label>
            <div class="col-sm-10">
                <select class="form-control" name="multiple">
                    <option value="True">True</option>
                    <option value="False" selected>False</option>
                </select>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">添加</button>
        <a href="/item?state=manage" class="btn btn-secondary">返回列表</a>
    </form>
</div>
</body>
</html>
